<template>
  <div class="loading">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "LoadingComp",
};
</script>

<style scoped lang="scss">
@import "../static/common/base.scss";
.loading {
  width: 100%;
  ul {
    width: 100%;
    // 弹性布局
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 50px 0;
    height: 60px;
    box-sizing: content-box;
    li {
      width: 3px;
      height: 30px;
      margin: 0 5px;
      background-color: $bgc;
      animation-name: myAnimate;
      animation-duration: 1s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      &:nth-child(1) {
        animation-delay: 0.2s;
      }
      &:nth-child(2) {
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        animation-delay: 0.6s;
      }
      &:nth-child(4) {
        animation-delay: 0.8s;
      }
      &:nth-child(5) {
        animation-delay: 1s;
      }
    }
  }
}

@keyframes myAnimate {
  0% {
    height: 30px;
  }
  50% {
    height: 80px;
  }
  100% {
    height: 30px;
  }
}
</style>

